<!-- 报修管理 -->
<template>
  <div class="app-container">
    <!-- 查询表单 -->
    <el-form :inline="true" :model="listQuery" ref="listQuery">
      <el-form-item label="所属洗车站" prop="station">
        <el-input
          v-model="listQuery.station"
          placeholder="请输入所属洗车站"
        ></el-input>
      </el-form-item>
      <el-form-item label="水枪状态" prop="waterstatus">
        <el-select v-model="listQuery.waterstatus">
          <el-option label="全部" value="-1"></el-option>
          <el-option label="已修复" value="1"></el-option>
          <el-option label="未修复" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="泡沫状态" prop="foamstatus">
        <el-select v-model="listQuery.foamstatus">
          <el-option label="全部" value="-1"></el-option>
          <el-option label="已修复" value="1"></el-option>
          <el-option label="未修复" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="场地状态" prop="placestatus">
        <el-select v-model="listQuery.placestatus">
          <el-option label="全部" value="-1"></el-option>
          <el-option label="已修复" value="1"></el-option>
          <el-option label="未修复" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="报修时间" prop="date">
        <el-date-picker
          v-model="listQuery.date"
          type="daterange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getData(1)">查询</el-button>
        <el-button @click="resetQueryForm">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 修复按钮 -->
    <div class="btn-wrap">
      <el-button type="primary" @click="repairSubmit">修复</el-button>
    </div>
    <!-- 表格 -->
    <el-table
      ref="table"
      border
      :data="table.tableData"
      @selection-change="tableSelect"
      v-loading="table.loading"
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column type="index" width="50" label="序号" />
      <el-table-column label="所在站点">
        <template slot-scope="scope">
          {{ scope.row.machine_name && scope.row.machine_name.split(",")[1] }}
        </template>
      </el-table-column>
      <el-table-column label="所在设备">
        <template slot-scope="scope">
          {{ scope.row.machine_name && scope.row.machine_name.split(",")[0] }}
        </template>
      </el-table-column>
      <el-table-column prop="repairCount" label="报修数" />
      <el-table-column prop="userName" label="用户" />
      <el-table-column prop="mobile" label="用户手机" />
      <el-table-column prop="water_Gun_Description" label="水枪" />
      <el-table-column prop="bubble_Description" label="泡沫" />
      <el-table-column prop="cleaner_Description" label="吸尘器" />
      <el-table-column prop="machine_Description" label="主机" />
      <el-table-column prop="station_Description" label="场地" />
      <el-table-column
        prop="fault_Description"
        label="备注"
        :show-overflow-tooltip="true"
      />
      <el-table-column label="图片" width="200">
        <template slot-scope="scope">
          <div class="img-wrap">
            <el-image
              v-for="(i, index) in scope.row.repairImgList"
              style="width: 50px; height: 50px"
              :key="index"
              :src="i"
              :preview-src-list="[i]"
            >
            </el-image>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="报修时间">
        <template slot-scope="scope">
          {{ scope.row.addtime | filterTime }}
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          {{ scope.row.isfixquestion == 0 ? "未修复" : "已修复" }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button size="mini" @click="openInfo(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 详情弹窗 -->
    <infoDialog :info="info" />
  </div>
</template>

<script>
import infoDialog from "./components/infoDialog";
export default {
  name: "RepairManagement",
  data() {
    return {
      // 表格
      table: {
        // 是否显示loading
        loading: false,
        // 表格数据
        tableData: []
      },
      // 查看详情
      info: {
        // 是否显示详情
        show: false,
        // 行数据
        rowData: {}
      },
      // 查询参数
      listQuery: {
        // 分页条数
        pageSize: 10,
        // 当前页
        pageIndex: 1,
        // 时间
        date: [],
        // 所属洗车站
        station: "",
        // 水枪状态
        waterstatus: "-1",
        // 泡沫状态
        foamstatus: "-1",
        // 场地状态
        placestatus: "-1",
        // 洗车机id
        wash_Machine_Id: null
      },
      // table多选选中的数组
      activeArr: []
    };
  },
  components: {
    infoDialog
  },
  mounted() {
    // 获取设备管理跳转带过来的wash_Machine_Id
    if (this.$route.params.wash_Machine_Id) {
      this.listQuery.wash_Machine_Id = this.$route.params.wash_Machine_Id;
    }
    this.getData();
  },
  methods: {
    // 表格多选
    tableSelect(val) {
      this.activeArr = val;
    },
    // 提交报修
    repairSubmit() {
      if (!this.activeArr.length) {
        this.$message.error("请勾选需要修复的设备");
        return;
      }
      let idArr = [];
      this.activeArr.forEach(item => {
        idArr.push(item.wash_Machine_Id);
      });
      this.$confirm("确认要修复机器吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          const res = await this.$api.repairManagement.FixrepairUpdateUpdate({
            wash_MachineId: idArr
          });
          this.getData();
          this.$message({
            type: "success",
            message: "修复成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消修复"
          });
        });
    },
    // 重置查询条件
    resetQueryForm() {
      this.listQuery.wash_Machine_Id = null;
      this.$refs.listQuery.resetFields();
    },
    // 查看详情
    openInfo(row) {
      this.info.rowData = row;
      this.info.show = true;
    },
    // 获取列表数据
    async getData(pageIndex) {
      if (pageIndex) {
        this.listQuery.pageIndex = pageIndex;
      }
      this.table.loading = true;
      // 拼接请求参数
      let reqObj = {
        beginTime: this.listQuery.date && this.listQuery.date[0],
        endTime: this.listQuery.date && this.listQuery.date[1],
        pageSize: this.listQuery.pageSize,
        pageIndex: this.listQuery.pageIndex,
        station: this.listQuery.station,
        waterstatus: this.listQuery.waterstatus,
        foamstatus: this.listQuery.foamstatus,
        placestatus: this.listQuery.placestatus
      };
      if (!reqObj.beginTime) {
        delete reqObj.beginTime;
        delete reqObj.endTime;
      }
      if (this.listQuery.wash_Machine_Id) {
        reqObj.wash_Machine_Id = this.listQuery.wash_Machine_Id;
      }
      const res = await this.$api.repairManagement.RepairGetPageList(reqObj);
      this.table.loading = false;
      this.table.tableData = res.data.list;
    }
  }
};
</script>
<style lang="scss" scoped>
.btn-wrap {
  margin-bottom: 10px;
  text-align: right;
}
.img-wrap {
  display: flex;
  & > div {
    margin-right: 10px;
    &:last-of-type {
      margin-right: 0;
    }
  }
}
</style>
